<!DOCTYPE html>
<html>
<head lang="zh">
    <meta charset="utf-8">
    <title>renliqing</title>

    <meta content="课程教学实例" name="Description">
    <meta content="bootstrap 前端学习 css" name="Keywords">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--坑爹的IE兼容-->
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <!--将360默认为极速模式打开-->
    <meta name="renderer" content="webkit" >
    <!-- Bootstrap -->
    <link href="//cdn.bootcss.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!--导航-->
<nav class="navbar navbar-inverse navbar-fixed-top" >
    <div class="navbar-inner">
        <div class="container">
            <!--<a class="brand" href="#">Title</a>-->
            <ul class="nav">
                <li class="active"><a href="./index.html">首页</a></li>
                <li class=""><a href="./index-started.html">起步</a></li>
                <li><a href="#">脚手架</a></li>
                <li><a href="#">基本CSS样式</a></li>
                <li><a href="#">组件</a></li>
                <li><a href="#">JavaScript插件</a></li>
                <li><a href="#">定制</a></li>
                <li><a href="#">网站实例</a></li>
            </ul>
        </div>
    </div>
</nav>
<!--页头-->
<header >
    <div class="container" style="text-align:center">
        <h1 style="margin-top:137px">Bootstrap</h1>
        <h2>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</h2>
        <div class="gronp">
            <button class="btn btn-large btn-primary">下载Bootstrap</button>
        </div>
        <div style="margin-top:80px; color:#dddddd">
            <a href="#" style="margin-right:20px;">GitHub project</a>
            <a href="#" style="margin-right:20px;">案例</a>
            <a href="#" style="margin-right:20px;">扩展</a>
            <a href="#">Version 2.3.2</a>
        </div>
    </div>
    <div class="bs-docs-social" style="text-align:center">
        <div class="container">
            <ul class="bs-docs-social-buttons">
                <li><a href="#" target="_blank">Bootstrap v3 中文文档</a></li>
            </ul>
        </div>
        <h1 style="margin-top:88px">Bootstrap介绍</h1>
        <p class="marketing-byline">需要为爱Bootstrap找N多理由吗？就在眼前。</p>
    </div>

</header>
<!--正文-->
<article>
    <div class="container">
        <div class="row">
            <div class="span12">

            </div>
            <div class="marketing">
                <div class="row-fluid">
                    <div class="span4">
                        <img class="marketing-img" src="./img/bs-docs-twitter-github.png">
                        <h2>人人为我，我为人人</h2>
                        <p>
                            “由”
                            <a href="http://twitter.com/mdo">@mdo</a>
                            “和”
                            <a href="http://twitter.com/fat">@fat</a>
                            “在twitter工作时创建，Bootstrap使用”
                            <a href="/lesscss.html">LESS CSS</a>
                            “并用”
                            <a href="http://nodejs.org">Node</a>
                            “编译，托管在”
                            <a href="http://github.com">Gihhub</a>
                            “上，方便大家使用这一框架构建更好的web应用”
                        </p>
                    </div>
                    <div class="span4">
                        <img class="marketing-img" src="./img/bs-docs-responsive-illustrations.png">
                        <h2>任何人都可以使用</h2>
                        <p>“Bootstrap不光为了看起来好看，而且在现代的桌面浏览器上有极佳的表现（包括IE7！）在平板电脑和智能手机上面还有”
                            <a href="./scaffolding.html#responsive">响应式CSS</a>
                            “可以使用”
                        </p>
                    </div>
                    <div class="span4">
                        <img class="marketing-img" src="./img/bs-docs-bootstrap-features.png">
                        <h2>丰富的特色。</h2>
                        <p>
                            “12列的响应式”
                            <a href="./scffolding.html#grid">栅格结构</a>
                            “、丰富的组件、”
                            <a href="./javascript.html">JavaScript插件</a>
                            “、排版、表单控件，还有”
                            <a href="./customize.html">基于web的定制工具</a>
                            “。”
                        </p>
                    </div>
                </div>
                <div style="text-align:center; margin-top:88px">
                    <h1>基于Bootstrap构建的网站。</h1>
                    <p class="marketing-byline">
                        “更多基于Bootstrap构建的网站列表，请访问”
                        <a href="http://expo.bootcss.com/" target="_blank">优站精选</a>
                        “或者”
                        <a href="./getting-started,html#examples">看看下面的几个案例</a>
                        “。”
                    </p>
                    <ul class="thumbnails example-sites">
                        <li class="span3">
                            <a href="http://www.ghostchina.com/" class="thumbnail" target="_blank">
                                <img src="./img/1.jpg" alt="Ghost中文网">
                            </a>
                        </li>
                        <li class="span3">
                            <a href="http://twibble.io/" class="thumbnail" target="_blank">
                                <img src="./img/2.jpg" alt="Twibble.io">
                            </a>
                        </li>
                        <li class="span3">
                            <a href="http://www.gruntjs.net/" class="thumbnail" target="_blank">
                                <img src="./img/4  (2).jpg" alt="Grun中文网">
                            </a>
                        </li>
                        <li class="span3">
                            <a href="http://sincerel.com/postagram" class="thumbnail" target="_blank">
                                <img src="./img/4  (1).jpg" alt="Postagram">
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</article>
<!--页脚-->
<footer class="footer">
    <div class="container" style="text-align:center; margin-top:88px">
        <p>"Designed and built with all the love in the world by"
            <a href="http://twitter.com/mdo" target="_blank">@mdo</a>
            "and"
            <a href="http://twitter.com/fat" target="_blank">@fat</a>
            "."
        </p>
        <p>"Code licensed under"
            <a href="http://www.apache.org/licenses/LICENSES-2.0" target="_blank">Apache License v2.0</a>
            ",documentation under "
            <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>
            "."
        </p>
        <p>
            <a href="http://glyphicons.com">Glyphicons Free</a>
            "licensed under "
            <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>
            "."
        </p>
        <p class="footer-links">
            <a href="http://blog.getbootstrap.com">blog  .</a>
            <a href="https://github.com/twbs/bootstrap/issues?state=open">  Issues  .</a>
            <a href="https://github.com/twbs/bootstrap/releases">  Changelog</a>
        </p>
    </div>
</footer>
<!-- Le javascript
    ================================== -->

<script src="http://code.jquery.com/jquery.js"></script>

<script src="//cdn.bootcss.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>

</body>
</html>